<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <!-- basic styles -->
        <link href="../../assets/css/bootstrap.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="../../assets/css/font-awesome.min.css" />
        <link rel="stylesheet" href="../../assets/css/ace.min.css" />
        <link rel="stylesheet" href="../../assets/css/ace-rtl.min.css" />
        <link rel="stylesheet" href="../../assets/css/ace-skins.min.css" />
        <link rel="stylesheet" href="../../assets/css/Contextmenu.css" />
    </head>
    <body>
        <div class="main-container">
            <div class="col-xs-12">
                <h3 class="header smaller lighter blue">用户组管理</h3>
                <div style="padding-bottom: 5px;">
                    <button class="btn btn-success">添加用户组</button>
                    <button class="btn btn-danger">删除用户组</button>
                </div>
                <div class="table-header">
                    默认库设置
                </div>
                <div class="table-responsive">
                    <table id="sample-table-2" class="table table-striped table-bordered table-hover">
                        <thead>
                            <tr>
                                <th class="center">
                                    <label>
                                        <input type="checkbox" class="ace" />
                                        <span class="lbl"></span>
                                    </label>
                                </th>
                                <th>Domain</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="center">
                                    <label>
                                        <input type="checkbox" class="ace" />
                                        <span class="lbl"></span>
                                    </label>
                                </td>
                                <td>
                                    组1
                                </td>
                                <td>
                                    <a class="green" href="#">
                                        <i class="icon-pencil bigger-130"></i>
                                    </a>
                                    <a class="red" href="#">
                                        <i class="icon-trash bigger-130"></i>
                                    </a>
                                </td>
                            </tr>
                            <tr>
                                <td class="center">
                                    <label>
                                        <input type="checkbox" class="ace" />
                                        <span class="lbl"></span>
                                    </label>
                                </td>
                                <td>
                                    组2
                                </td>
                                <td>
                                    <a class="green" href="#">
                                        <i class="icon-pencil bigger-130"></i>
                                    </a>
                                    <a class="red" href="#">
                                        <i class="icon-trash bigger-130"></i>
                                    </a>
                                </td>
                            </tr>
                            <tr>
                                <td class="center">
                                    <label>
                                        <input type="checkbox" class="ace" />
                                        <span class="lbl"></span>
                                    </label>
                                </td>
                                <td>
                                    组3
                                </td>
                                <td>
                                    <a class="green" href="#">
                                        <i class="icon-pencil bigger-130"></i>
                                    </a>
                                    <a class="red" href="#">
                                        <i class="icon-trash bigger-130"></i>
                                    </a>
                                </td>
                            </tr>
                            <tr>
                                <td class="center">
                                    <label>
                                        <input type="checkbox" class="ace" />
                                        <span class="lbl"></span>
                                    </label>
                                </td>
                                <td>
                                    组4
                                </td>
                                <td>
                                    <a class="green" href="#">
                                        <i class="icon-pencil bigger-130"></i>
                                    </a>
                                    <a class="red" href="#">
                                        <i class="icon-trash bigger-130"></i>
                                    </a>
                                </td>
                            </tr>
                            <tr>
                                <td class="center">
                                    <label>
                                        <input type="checkbox" class="ace" />
                                        <span class="lbl"></span>
                                    </label>
                                </td>
                                <td>
                                    组5
                                </td>
                                <td>
                                    <a class="green" href="#">
                                        <i class="icon-pencil bigger-130"></i>
                                    </a>
                                    <a class="red" href="#">
                                        <i class="icon-trash bigger-130"></i>
                                    </a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <script src="../../assets/js/jquery.js"></script>
        <script src="../../assets/js/bootstrap.min.js"></script>
        <!-- page specific plugin scripts -->
        <script src="../../assets/js/jquery-ui-1.10.3.custom.min.js"></script>
        <script src="../../assets/js/jquery.dataTables.min.js"></script>
        <script src="../../assets/js/jquery.dataTables.bootstrap.js"></script>
        <script type="text/javascript">
            jQuery(function($) {
                var oTable1 = $('#sample-table-2').dataTable({
                    "aoColumns": [
                        {"bSortable": false},
                        {"bSortable": false},
                        {"bSortable": false}
                    ],
//                    "aaData":[[]]
                });
                $('table th input:checkbox').on('click', function() {
                    var that = this;
                    $(this).closest('table').find('tr > td:first-child input:checkbox')
                            .each(function() {
                        this.checked = that.checked;
                        $(this).closest('tr').toggleClass('selected');
                    });

                });
            })
        </script>
    </body>
</html>
